<template>
  <div class="alarm">
    <DFPageList ref="dfPageListRef" :page-options="pageOptions" />
  </div>
</template>

<script lang="ts" setup name="Alarm">
  import { ref } from 'vue';
  import lang from './lang';
  import { addAlarm, delAlarm, pageAlarm, updateAlarm } from '@/api/base/alarm';
  import { useMixins } from '@/hooks/useMixins';
  import { listMachine } from '@/api/base/machine';

  const { loadLangFn, getDictDataListFn } = useMixins();

  const dfPageListRef: any = ref(null);

  loadLangFn(lang);

  const alarmTypeList = ref([]);

  const machineList = ref([]);

  const pageOptions = {
    searchForm: {
      formSchemas: [
        {
          label: 'machineName',
          prop: 'machineCode',
          component: 'NSelect',
          options: machineList,
        },
        {
          label: 'alarmTypeName',
          prop: 'alarmTypeCode',
          component: 'NSelect',
          options: alarmTypeList,
        },
        {
          label: 'alarmName',
        },
        {
          label: 'alarmCode',
        },
      ],
    },
    table: {
      columns: [
      {
          width: 170,
          label: 'machineName',
          render: (row) => {
            return h('span', {
              innerText: row.machineCode
                ? machineList.value.find((item) => item.value === row.machineCode).label
                : '-',
            });
          },
        },
        {
          width: 120,
          label: 'alarmName',
        },
        {
          width: 120,
          label: 'alarmCode',
        },
        {
          width: 120,
          label: 'alarmArea',
        },
        {
          width: 120,
          label: 'alarmTypeName',
          render: (row) => {
            return h('span', {
              innerText: row.alarmTypeCode
                ? alarmTypeList.value.find((item) => item.value === row.alarmTypeCode).label
                : '-',
            });
          },
        },
        {
          width: 120,
          label: 'remark',
          common: true,
        },
      ],
      action: {
        columns: [
          {
            label: 'edit',
          },
          {
            label: 'delete',
          },
        ],
      },
      operaColumn: [
        {
          label: 'add',
        },
      ],
      requestFn: pageAlarm,
      delRequestFn: delAlarm,
    },
    modalFormDialog: {
      formSchemas: [
        {
          label: 'machineName',
          prop: 'machineCode',
          component: 'NSelect',
          options: machineList,
          required: true,
          giProps: { span: 4 },
          span: 3,
        },
        {
          label: 'alarmName',
          required: true,
        },
        {
          label: 'alarmCode',
          required: true,
          editDialogDisabled: true,
        },
        {
          label: 'alarmTypeName',
          prop: 'alarmTypeCode',
          required: true,
          component: 'NSelect',
          options: alarmTypeList,
        },
        {
          label: 'alarmArea',
        },
        {
          label: 'remark',
          common: true,
          type: 'textarea',
        },
      ],
      addDataFn: addAlarm,
      updateDataFn: updateAlarm,
    },
  };

  async function initDictData() {
    const res = await Promise.all([getDictDataListFn('alarm_type'), listMachine()]);

    const [list1, list2] = res;

    alarmTypeList.value = list1;

    machineList.value =
      list2?.data.map((item) => ({
        label: item.machineName + `(${item.machineCode})`,
        value: item.machineCode,
      })) || [];
  }

  initDictData();
</script>
